<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      Vue.config.productionTip = false;
      /* 
      使用Vue.extend方法会返回一个VueComponent构造函数
      当使用组件的时候 VueComponent构造函数会实例化 创建组件实例
      注意：每次创建组件 都会得到不同的VueComponent构造函数！！！
      */
      const Count = Vue.extend({
        name: "Count",
        template: `
        <div>
        <p>我是count{{count}}</p>
        <button @click="count++">累加</button>
      </div>
        `,
        data() {
          return {
            count: 1,
          };
        },
      });
      // Count.prototype.b = 3;
      // console.log(new Count(), "组件实例");
      // console.log(new Count().__proto__, "VueComponent构造函数的原型对象");
      // console.log(new Count().__proto__.__proto__, "Vue的原型对象");
      // console.log(new Count().__proto__.__proto__.__proto__,"大写的obj的原型对象");
      // console.log(new Count().__proto__.__proto__.__proto__.__proto__,"null");
      /*
        组件实例的原型链
          Count组件实例-->Count的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null
          student组件实例-->Student的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null


        实际使用:
          当我们想要给所有的组件实例扩展一些方法或者属性的时候,我们可以把这个方法和属性添加在Vue的原型对象上
          [[切记,不能添加在VueComponent上,因为不同的组件 不是同个VueComponent,但是Vue只有一个]]
      */
      const Header = Vue.extend({
        name: "Header",
        template: `<p>我是Header</p>`,
      });
      Vue.prototype.a = 1;
      const vm = new Vue({
        el: "#app",
        components: {
          Count: Count,
          Header: Header,
        },
        data() {
          return {
            msg: "hello vue!",
          };
        },
        methods: {},
        /* 
          相同组件的多次使用  Vuecomponent构造函数也不会是同一个
        */
        template: `
        <div>
          <Header/>
        <h1>{{msg}}</h1>
        
        <Count/>
        <br/>
        <Count/>
        </div>
        `,
      });

      //console.log(Vue.extend(), "Vue.extend()");
      /*
      控制台打印结果 
      ƒ VueComponent (options) {
        this._init(options);
      }
      */
      //console.log(new Count(), "Count");
      /* 
      VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 'Count'
      */
      //console.log(new Header(), "Header");
    </script>
  </body>
</html>
